<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" title="个人信息" left-arrow @click-left="$router.back()" />
    <!-- /导航栏 -->
    <van-cell title="头像" is-link @click="$refs.inputRef.click()">
      <van-image class="avatar" fit="cover" round :src="user.photo" />
      <input hidden type="file" ref="inputRef" @change="iptChange" />
    </van-cell>
    <van-cell title="昵称" @click="isShowUpdateName = true" :value="user.name" is-link />
    <van-cell
      title="性别"
      @click="isShowUpdateGender = true"
      :value="user.gender == 1 ? '男' : '女'"
      is-link
    />
    <van-cell
      title="生日"
      @click="isShowUpdateBirthdy = true"
      :value="user.birthday || '1970-01-01'"
      is-link
    />

    <!-- TODO: 下面将会放很多 popup -->
    <!-- 修改昵称的弹出层 -->
    <van-popup position="bottom" v-model="isShowUpdateName" :style="{ height: '100%' }">
      <UpdateName
        v-if="isShowUpdateName"
        :name.sync="user.name"
        @close="isShowUpdateName = false"
      ></UpdateName>
    </van-popup>
    <!-- 修改性别的弹出层 -->
    <!-- isShowUpdateGender -->
    <van-popup v-model="isShowUpdateGender" position="bottom" :style="{ height: '40%' }">
      <UpdateGender
        v-if="isShowUpdateGender"
        :gender.sync="user.gender"
        @close="isShowUpdateGender = false"
      ></UpdateGender>
    </van-popup>
    <!-- 修改生日的弹出层 -->
    <van-popup v-model="isShowUpdateBirthdy" position="bottom">
      <UpdateBirthday
        v-if="isShowUpdateBirthdy"
        @close="isShowUpdateBirthdy = false"
        :birthday.sync="user.birthday"
      ></UpdateBirthday>
    </van-popup>
    <!-- 编辑头像弹层 -->
    <van-popup v-model="isShowUpdateAvatar" style="height: 100%" position="bottom">
      <UpdateAvatar
        v-if="isShowUpdateAvatar"
        @close="isShowUpdateAvatar = false"
        :photo.sync="user.photo"
      ></UpdateAvatar>
    </van-popup>
    <!-- 编辑头像弹层 -->
  </div>
</template>

<script>
import { getUserProfile } from '@/api/user.js'
import UpdateName from './components/update-name.vue'
import UpdateGender from './components/update-gender.vue'
import UpdateBirthday from './components/update-birthday.vue'
import UpdateAvatar from './components/update-avatar.vue'
export default {
  name: 'profile',
  components: {
    UpdateName,
    UpdateGender,
    UpdateBirthday,
    UpdateAvatar,
  },
  data() {
    return {
      user: {}, // 用户个人信息
      isShowUpdateName: false,
      isShowUpdateGender: false,
      isShowUpdateBirthdy: false,
      isShowUpdateAvatar: false,
    }
  },

  created() {
    this.loadUseInfo()
  },

  methods: {
    async loadUseInfo() {
      try {
        let res = await getUserProfile()
        console.log(res.data.data)
        this.user = res.data.data
      } catch (error) {
        this.$toast.fail('获取失败')
      }
    },
    // 上传图片的change事件
    iptChange() {
      //1. 获取文件对象
      const file = this.$refs.inputRef.files[0]
      //2. URL
      // const imgUrl = URL.createObjectURL(file)
      this.user.photo = URL.createObjectURL(file)

      //3. 显示 popup 阿凡达
      this.isShowUpdateAvatar = true
      //4. 清除 ipt 框里面的文件内容
      this.$refs.inputRef.value = ''
    },
  },
}
</script>

<style scoped lang="less">
.user-profile {
  .avatar {
    width: 60px;
    height: 60px;
  }
}

.van-popup {
  background: #f5f7f9;
}
</style>
